import React from 'react'
import './icon.css'
import Icons from './icon.json'
class Search extends React.Component {
  render() {
    return (
      <>
        <div className="box">
          <i className="icon-search iconSearch"></i>
          <div className="form-group">
            <input type="search" className="control "  />
          </div>
        </div>
      </>
    )
  }
}

class Items extends React.Component {
  copy = str => {
    console.log(str)
    let input = document.createElement('input')
    input.value = str
    setTimeout(() => {
      input.select()
      document.execCommand('copy')
      input.remove()
    })
    document.body.appendChild(input)
  }
  render() {
    return (
      <>
        <div className="icons">
          {Icons.map((item, index) => (
            <div className="icons-item" key={index}>
              <i
                className={'icon-' + item[0]}
                onClick={() => {
                  this.copy('icon-' + item[0])
                }}
              ></i>
              <span className="text">{item[1]}</span>
            </div>
          ))}
        </div>
      </>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <>
        <Search />
        <Items />
      </>
    )
  }
}

export default App
